<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GDP</title>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="http://echarts.baidu.com/doc/example/timelineOption.js"></script>
    <script src="../lib/d3.js"></script>
</head>
<body>
<div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
<script type="text/javascript">

    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('main'));
            option = {
                timeline:{
                    data:[
                        '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
                        '2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
                    ],
                    label : {
                        formatter : function(s) {
                            return s.slice(0, 4);
                        }
                    },
                    autoPlay : true,
                    playInterval : 1000
                },
                options:[
                    {
                        title : {
                            'text':'2002GDP',
                            'subtext':'just for text'
                        },
                        tooltip : {'trigger':'axis'},
                        legend : {
                            x:'right',
                            'data':['GDP','房地产'],
                            'selected':{
                                'GDP':true,
                                '金融':false
                            }
                        },
                        calculable : true,
                        grid : {'y':80,'y2':100},
                        xAxis : [{
                            'type':'category',
                            'axisLabel':{'interval':0},
                            'data':[
                                '北京','\n天津','河北','\n山西','内蒙古','\n辽宁','吉林','\n黑龙江',
                                '上海','\n江苏','浙江','\n安徽','福建','\n江西','山东','\n河南',
                                '湖北','\n湖南','广东','\n广西','海南','\n重庆','四川','\n贵州',
                                '云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆'
                            ]
                        }],
                        yAxis : [
                            {
                                'type':'value',
                                'name':'GDP（亿元）',
                                'max':53500
                            },
                            {
                                'type':'value',
                                'name':'其他（亿元）'
                            }
                        ],
                        series : [
                            {
                                'name':'GDP',
                                'type':'bar',
                                'data': dataMap.dataGDP['2002']
                            },
                            {
                                'name':'金融','yAxisIndex':1,'type':'bar',
                                'data': dataMap.dataFinancial['2002']
                            },
                            {
                                'name':'房地产','yAxisIndex':1,'type':'bar',
                                'data': dataMap.dataEstate['2002']
                            }

                        ]
                    },
                    {
                        title : {'text':'2003'},
                        series : [
                            {'data': dataMap.dataGDP['2003']},
                            {'data': dataMap.dataFinancial['2003']},

                        ]
                    },
                    {
                        title : {'text':'2004'},
                        series : [
                            {'data': dataMap.dataGDP['2004']},
                            {'data': dataMap.dataFinancial['2004']},

                        ]
                    },
                    {
                        title : {'text':'2005'},
                        series : [
                            {'data': dataMap.dataGDP['2005']},
                            {'data': dataMap.dataFinancial['2005']},

                        ]
                    },
                    {
                        title : {'text':'2006'},
                        series : [
                            {'data': dataMap.dataGDP['2006']},
                            {'data': dataMap.dataFinancial['2006']},

                        ]
                    },
                    {
                        title : {'text':'2007'},
                        series : [
                            {'data': dataMap.dataGDP['2007']},
                            {'data': dataMap.dataFinancial['2007']},

                        ]
                    },
                    {
                        title : {'text':'2008'},
                        series : [
                            {'data': dataMap.dataGDP['2008']},
                            {'data': dataMap.dataFinancial['2008']},

                        ]
                    },
                    {
                        title : {'text':'2009'},
                        series : [
                            {'data': dataMap.dataGDP['2009']},
                            {'data': dataMap.dataFinancial['2009']},

                        ]
                    },
                    {
                        title : {'text':'2010'},
                        series : [
                            {'data': dataMap.dataGDP['2010']},
                            {'data': dataMap.dataFinancial['2010']},
                        ]
                    },
                    {
                        title : {'text':'2011'},
                        series : [
                            {'data': dataMap.dataGDP['2011']},
                            {'data': dataMap.dataFinancial['2011']},
                        ]
                    }
                ]
            };


            myChart.setOption(option);
            d3.select("canvas").style("opacity",0)
                .transition()
                .duration(1000)
                .style("opacity",1);

        }
    );
</script>
</body>
</html>